<template>
	<div>
		<div class="head">
			<router-link class="operating" tag="span" to="/Login">{{$t('FindPwdAux.v1')}}</router-link>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">123</div>
		</div>
		<van-popup v-model="show" style="width: 100%;height: 100%;border-radius: 5px;background: #2c3145;text-align: left;" :close-on-click-overlay="false">
			<div style="padding: 10px;color:white;background: #2c3145;text-align: left;" @click="exit">
				<van-icon name="arrow-left" size="26" />
			</div>
			<div style="color: white;font-size: 13px;background: #2c3145;">
				<div align="center" style="padding-top: 20px;padding-bottom: 10px;margin-left: 15px;margin-right: 15px;">
					<img src="../assets/images/sure.png" style="width: 80px;height: 80px;padding-bottom: 10px;" />
					<div style="font-size: 16px;">{{$t('FindPwdAux.v2')}}</div>
					<div style="padding-top: 10px;font-size: 14px;color: rgb(183,183,183);">{{$t('FindPwdAux.v3')}}</div>
				</div>
				<div style="padding: 15px;" v-if="listArr != ''">
					<div style="border-top: 1px solid rgba(93,107,151,0.5);">
						<van-grid :column-num="3">
							<van-grid-item v-for="(item, index) in list2" :key="Math.random()">
								<div class="yellow" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
									<span v-text="item" @click="setActive2(item, index)"></span>
								</div>
							</van-grid-item>
						</van-grid>
					</div>
				</div>
				<van-cell-group class="two" style="background: #2C3145;color: #858dac;padding: 10px 15px;padding-top: 0px;" v-if="list != '' && list != null">
					<div style="color: white;font-size: 13px;background: #2c3145;border-top: 1px solid rgba(93,107,151,0.5);padding-bottom: 10px;">
						<van-grid :column-num="3">
							<van-grid-item v-for="(item, index) in list" :key="Math.random()" v-if="listArr.indexOf(index) == -1">
								<div :class="{'red': listArr.indexOf(index) != -1}" style="border: 1px solid rgb(93,107,151);padding: 3px 10px;border-radius: 5px;">
									<span v-text="item" @click="setActive(item, index)"></span>
								</div>
							</van-grid-item>
						</van-grid>
					</div>
				</van-cell-group>
				<div style="padding: 10px 20px;">
					<van-button slot="button" size="normal" type="primary" style="height: 38px;line-height: 36px;width: 100%;" @click="zjcSure" :disabled="indexType">{{$t('FindPwdAux.v4')}}</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
	export default {
		name: 'FindPwdAux',
		data() {
			return {
				loading: false,
				list: [],
				list2: [],
				listArray: [],
				listString: '',
				oc: '',
				listArr: [],
				show: true,
				indexType: true
			};
		},
		beforeCreate() {
			_this = this;
		},
		created() {},
		mounted() {
			if(sessionStorage.getItem('list')) {
				this.list = JSON.parse(sessionStorage.getItem('list'));
			}
			if(sessionStorage.getItem('listString')) {
				sessionStorage.removeItem('listString');
			}
		},
		methods: {
			setActive(item, index) {
				this.oc = index;
				if(this.listArr.includes(index)) {
					this.listArr.splice(this.listArr.indexOf(index), 1);
					this.listArray.splice(this.listArray.indexOf(item), 1);
					this.list2.splice(this.listArray.indexOf(item), 1);
				} else {
					this.listArr.push(index);
					this.listArray.push(item);
					this.list2.push(item);
				}
				this.listString = this.listArray.join(' ');
				if(this.listArray.length == 12) {
					this.indexType = false;
				} else {
					this.indexType = true;
				}
			},
			setActive2() {
				this.list2 = [];
				this.listArr = [];
				this.listArray = [];
				this.listString = '';
			},
			zjcSure() {
				// 确定助记词
				base.getUserNameZJC2({
						// 判断助记词是否正确
						userName: this.$route.query.code,
						auxiliaries: this.listString
					})
					.then(res => {
						if(res.code == 200) {
							this.$router.push({
								path: '/FindPwd',
								query: {
									list: sessionStorage.setItem('listString', this.listString),
									code: this.$route.query.code
								}
							});
						} else {
							this.$toast(res.msg);
						}
					});
			},
			exit() {
				// 助记词返回按钮
				this.$router.push({
					path: '/FindPwd'
				});
			}
		},
		watch: {}
	};
</script>

<style lang="less" scoped="scoped">
	.title {
		font-size: 15px;
		padding: 10px;
		text-align: right;
	}
	
	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 20px;
	}
	
	.weui-cells:after {
		left: 15px;
		right: 15px;
	}
	
	.weui-cells .weui-cell {
		padding: 15px 0;
	}
	
	.main {
		margin: 0 20px;
		overflow: hidden;
	}
	
	.btn {
		padding: 20px;
	}
	
	.text {
		color: #636363;
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}
	
	.logo {
		width: 30%;
		display: block;
		margin: 10px auto;
	}
	
	.qr {
		position: absolute;
		right: 0;
		top: 0;
		img {
			width: 26px;
			padding: 12px;
		}
	}
	
	.Protocol {
		padding: 10px 20px;
		font-size: 12px;
		min-height: 24px;
		span {
			text-decoration: underline;
			color: #3673f7;
		}
	}
	
	/deep/ .weui-icon-circle {
		font-size: 17px;
	}
	
	/deep/ .weui-icon-success {
		font-size: 17px;
	}
	
	/deep/ .vux-check-icon>.weui-icon-success:before,
	.vux-check-icon>.weui-icon-success-circle:before {
		color: #5571f8;
	}
	
	/deep/ .weui-btn_plain-primary {
		color: #5571f8;
		border-color: #5571f8;
	}
	
	/deep/ .weui-btn_mini {
		font-size: 12px !important;
	}
	
	// 用户协议
	.checkPopup {
		font-size: 14px;
		h2 {
			text-align: center;
			padding: 10px 0;
		}
		.checkContent {
			padding: 0 10px 10px;
		}
	}
	
	input {
		padding: 15px 10px;
	}
	
	.head~.overlay {
		top: 45px;
	}
	
	.text {
		padding: 20px;
		text-align: center;
		font-size: 13px;
		color: #ffffff;
	}
	
	.logo {
		width: 30%;
		display: block;
		margin: 5% auto 5%;
	}
	
	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 5px 20px 20px;
	}
	
	/deep/.vux-x-input.disabled .weui-input {
		text-fill-color: #fff !important;
		-webkit-text-fill-color: #fff !important;
	}
	
	/deep/ .van-grid-item__content {
		background: #2c3145;
		padding: 15px 15px 5px 0px;
	}
	
	/deep/ .van-hairline--top::after {
		border: 0;
	}
	
	/deep/ .van-grid-item__content::after {
		border: 0;
	}
	
	/deep/ .van-grid-item__content {
		float: left;
	}
	
	.red {
		border: 1px solid #3fb776 !important;
		background: #3fb776 !important;
	}
	
	.yellow {
		border: 1px solid rgb(93, 107, 151) !important;
		background: rgb(93, 107, 151) !important;
	}
	
	.two[class*='van-hairline']::after {
		border: 0;
	}
</style>